<template>
	<view class="detail">
		<view class="header flex-center">
			<view class="title">考核成功期数</view>
			<view class="num">
				<text>{{ num }}</text>
				期
			</view>
		</view>
		<view v-for="(item, index) in list" :key="index" @click="goDetail(item)">
			<view class="modular">
				<view class="flex-align-center">
					<view class="left-num flex-center">{{ item.instalment }}</view>
					<view class="item flex-column">
						<view class="kMoney">考核金额：{{ toFixedNum(item.checkAmount) }}元</view>
						<view class="tMoney flex-space-between">
							<text>交易金额：{{ toFixedNum(item.totalAmount) }}元</text>
						</view>
					</view>
					<view class="state" :class="{ finish: item.checkStatus == 2 }">{{ item.checkStatus | exeStatus }}</view>
				</view>
				<view class="time">有效期：{{ formDate(item.startDate) }}到{{ formDate(item.endDate) }}</view>
			</view>
		</view>
		<noData v-if="!list.length"></noData>
		<!-- <uni-load-more :status="loadMore"></uni-load-more> -->
	</view>
</template>

<script>
import loadMoreData from '@/mixins/loadmore';
import { depositPlanList } from '_a/termTask';
export default {
	mixins: [loadMoreData],
	data() {
		return {
			list: [],
			params: {},
			num: 0
		};
	},
	// 下拉刷新
	async onPullDownRefresh() {
		await this.init();
		uni.stopPullDownRefresh();
	},
	onLoad(o) {
		if (o.id) {
			this.params.id = o.id;
			this.params.orderNo = o.orderNo;
		}
		this.init();
	},
	methods: {
		reachBottomCallBack() {
			this.getList();
		},
		goDetail(item) {},
		getList() {
			let params = {
				...this.params
			};
			depositPlanList(params).then(res => {
				var list = res.data;
				list.map(item => {
					if (item.checkStatus == 2) {
						this.num =Number(this.num)+ 1;
					}
				});
				if(this.num <10){
					this.num = '0'+this.num
				}

				this.loadMoreStatusDeal(res.data);
				if (list.length > 0) {
					this.list = this.list.concat(list);
				}
			});
		}, // 初始化数据
		init() {
			this.$nextTick(() => {
				this.list = [];
				this.num = 0
				this.refreshLoad();
			});
		}
	}
};
</script>

<style lang="scss">
.detail {
}
page {
	background: #fafbfc;
}
.header {
	height: R(200);
	background: #2e8ded;
	border-radius: 0px 0px R(80) R(80);
	color: #fff;
	margin: 0 0 R(55);
	flex-direction: column;
	.title {
		margin-bottom: R(10);
		font-size: R(30);
	}
	.num {
		font-size: R(26);
		text {
			font-size: R(32);
			//   display: inline-block;
			padding: 0 R(10);
			color: #2e8ded;
			background: #fff;
			margin-right: R(10);
		}
	}
}
.modular {
	background: #ffffff;
	box-shadow: 0px R(5) 0px 0px rgba(47, 135, 222, 0.09);
	border-radius: 0px 0px R(10) R(10);
	padding: R(30) 0 0;
	margin: 0 R(25) R(25);
	position: relative;
	.left-num {
		width: R(81);
		height: R(50);
		background: linear-gradient(90deg, #ffa101 0%, #ffd342 100%);
		border-radius: 0px R(40) R(40) 0px;
		color: #fff;
		margin-right: R(20);
	}
	.item {
		flex: 1;
		font-size: R(30);
		color: #1b1b1b;
		.kMoney {
		}
		.tMoney {
			padding: R(21) 0 R(21);
		}

		.red {
			color: #ff0000;
		}
	}
	.time {
		font-size: R(24);
		font-weight: 400;
		color: #999999;
		padding: R(17) R(30);
		margin-top: R(21);
		background: #f1f8fd;
	}
	.state {
		position: absolute;
		right: 0;
		top: R(-30);
		width: R(137);
		height: R(50);
		line-height: R(50);
		background: linear-gradient(-90deg, #2a8bec 0%, #b0d4f9 100%);

		border-radius: R(40) R(10) 0px R(10);
		text-align: center;
		font-size: R(26);
		font-weight: 400;
		color: #ffffff;
	}
	.finish {
		background: linear-gradient(-90deg, #3bc5a0 0%, #55e0ad 100%);
	}
}
</style>
